<!--
  * 筹资项目
-->
<template>
  <div v-if="isShow">
    <!---------- 查询表单form end ----------->
    <a-card size="small" :bordered="false" :hoverable="true">
      <!---------- 表格操作行 begin ----------->
      <a-row class="smart-table-btn-block">
        <div class="smart-table-operate-block" style="width: 90%">
          <a-button @click="down" type="primary" :loading="iconLoading">
            <template #icon>
              <UsbOutlined />
            </template>
            导出所有
          </a-button>
        </div>
        <span class="smart-table-column-operate">
          <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.SYSTEM.EMPLOYEE" :refresh="queryData" />
        </span>
      </a-row>
      <!---------- 表格操作行 end ----------->

      <!---------- 表格 begin ----------->
      <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="blfunduseid" bordered
        :loading="tableLoading" :pagination="false" :scroll="{ x: 1500 }">
        <template #bodyCell="{ text, record, column }">
          <template v-if="column.dataIndex === 'blprojectname'">
            <a style="color: #1878ff" @click="showFormView(record)" type="link">{{ record.blprojectname }} </a>
          </template>
          <template v-if="column.dataIndex === 'bltype'">
            <span>{{ record.bltype == 0 ? '非长期筹资' : '长期筹资' }}</span>
          </template>
          <template v-if="column.dataIndex === 'blauditstate'">
            <div class="smart-table-operate">
              <span v-if="record.blauditstate == 0">资料已填写等待审核</span>
              <span v-if="record.blauditstate == 1">基金会审核</span>
              <span v-if="record.blauditstate == -1">基金会审核未通过</span>
              <span v-if="record.blauditstate == 2">基金会审核通过,等待递交纸质件</span>
              <span v-if="record.blauditstate == 3 || record.blauditstate == 4">收到纸质件等待基金确认</span>
              <span v-if="record.blauditstate == 5">申报成功</span>
            </div>
          </template>
        </template>
      </a-table>
      <!---------- 表格 end ----------->
      <!-- 分页-->
      <div class="smart-query-table-page">
        <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit"
          :total="total" @change="queryData" @showSizeChange="queryData" :show-total="(total) => `共${total}条`" />
      </div>
    </a-card>
  </div>
  <!-- 二级项目页面-->
  <FundProjectModal v-else :DataId="fuPassword" @emitPass="changeShow"></FundProjectModal>
</template>
<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { getStatisticsApi } from '/@/api/infoStatistics/infoStatistics-api';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import FundProjectModal from './modules/FundProject-modal.vue';
  import _ from 'lodash';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  // ---------------------------- 表格列 ----------------------------
  const columns = ref([
    {
      title: '项目名称',
      dataIndex: 'blprojectname',
      align: 'center',
      fixed: 'left',
    },
    {
      title: '项目申报类型',
      dataIndex: 'bltype',
      align: 'center',
    },
    {
      title: '项目申报单位',
      dataIndex: 'blsubject',
      align: 'center',
    },
    {
      title: '项目负责人',
      dataIndex: 'blleader',
      align: 'center',
    },
    {
      title: '项目联系人',
      dataIndex: 'bllinker',
      align: 'center',
    },
    {
      title: '联系人电话',
      dataIndex: 'bllinktel',
      align: 'center',
    },
    {
      title: '申报时间',
      dataIndex: 'bldate',
      align: 'center',
      sorter: {
        compare: (a, b) => new Date(a.bldate) - new Date(b.bldate),
      },
    },
    {
      title: '项目申报金额',
      dataIndex: 'blfinancmoney',
      align: 'center',
      sorter: {
        compare: (a, b) => a.blfinancmoney - b.blfinancmoney,
      },
    },
    {
      title: '申请状态',
      dataIndex: 'blauditstate',
      align: 'center',
    },
    {
      title: '项目类型',
      dataIndex: 'blext3',
      align: 'center',
    },
  ]);
  // ---------------------------- 查询数据表单和方法 ----------------------------

  const queryFormState = {
    page: 1,
    limit: PAGE_SIZE,
  };
  // 查询表单form
  const queryForm = reactive({ ...queryFormState });
  // 查看
  function showFormView(data) {
    isShow.value = false;
    fuPassword.value = data.blfinancprojectid;
  }
  // ---------------------------- 查询数据表单和方法 ----------------------------

  // 表格加载loading
  const tableLoading = ref(false);
  // 按钮加载loading
  const iconLoading = ref(false);
  // 表格数据
  const tableData = ref([]);
  // 总数
  const total = ref(0);
  // 总金额
  const totalMoney = ref(0);
  // 控制父组件是否展示
  const isShow = ref(true);
  // 改变父组件展示状态
  function changeShow() {
    isShow.value = true;
  }
  // ---------------------------- 详情 ----------------------------
  const fuPassword = ref({});

  // 查看年度协议
  function viewAnnual(data) {
    isShow.value = 2;
  }
  // ====== 导出=============
  async function down() {
    try {
      iconLoading.value = true;
      const queryResult = await getStatisticsApi.exportFinancProject()
      // 创建a标签
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(new Blob([queryResult.data]));
      // 指定下载文件名
      link.download = '筹资项目统计表.xlsx';
      // 指定下载链接
      link.href = url;
      // 把a标签加到页面中
      document.body.appendChild(link);
      // 触发a标签下载
      link.click();
      // 下载完成移除元素
      document.body.removeChild(link);
      // 释放掉blob对象
      window.URL.revokeObjectURL(url);
      message.success(`导出成功！`);
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      iconLoading.value = false;
    }
  }

  // 查询数据
  async function queryData() {
    tableLoading.value = true;
    try {
      let queryResult = await getStatisticsApi.getProjectList(queryForm);
      const data = queryResult.data.records;
      tableData.value = data;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  onMounted(queryData);
</script>